<template>
  <div class="app-container">
    <el-dialog :visible.sync="open1" width="100%" fullscreen append-to-body :before-close="close">
      <h2 style="padding: 0;">EDI 文件列表</h2>
      <div style="margin-bottom: 20px;">
        <span>MM012Oj 采购收货</span>
        <el-divider direction="vertical" />
        <span>MM009Oj 1步移仓</span>
        <el-divider direction="vertical" />
        <span>SD003Oj 销售发货</span>
        <el-divider direction="vertical" />
        <span>SD032Oj 其他发货</span>
        <el-divider direction="vertical" />
        <span>MD001Oj1 客户档案</span>
        <el-divider direction="vertical" />
        <span>MD001Oj2 供应商</span>
        <el-divider direction="vertical" />
        <span>MD001Oj3 物料档案</span>
      </div>
      <div style="margin-bottom: 20px;background-color: #c9c9c9;">
        <span>MM004Ij 采购收货</span>
        <el-divider direction="vertical" />
        <span>MM025Ij 1步移仓</span>
        <el-divider direction="vertical" />
        <span>SD004Ij 销售发货</span>
        <el-divider direction="vertical" />
        <span>SD033Ij 其他发货</span>
      </div>
      <div style="margin-bottom: 20px;">
        <span>4113	Xian Direct	直销仓</span>
        <el-divider direction="vertical" />
        <span>4101	Xian Saleable	渠道主仓</span>
        <el-divider direction="vertical" />
        <span>4114	Xian Dealer	渠道辅仓 to dealer经销商</span>
        <el-divider direction="vertical" />
        <span>4110	Xian IT-OUT	直销仓的在途仓</span>
        <el-divider direction="vertical" />
        <span>6201	Chengdu Saleable	渠道主仓</span>
        <el-divider direction="vertical" />
        <span>6213	Chengdu Direct	直销仓</span>
        <el-divider direction="vertical" />
        <span>6214	Chengdu Dealer	渠道辅仓 to dealer经销商</span>
        <el-divider direction="vertical" />
        <span>6210	Chengdu IT-OUT	直销仓的在途仓</span>
      </div>
      <el-tree
        :data="treeData"
        :props="defaultProps"
        node-key="label"
        :expand-on-click-node="false"
        :default-expanded-keys="['2024','07']"
        accordion
        @node-click="handleNodeClick"
      />

      <!-- 对话框 -->
      <el-drawer
        :destroy-on-close="true"
        :visible.sync="dialogVisible"
        size="80%"
        :append-to-body="true"
      >
        <component :is="currentFileComponent" :ppath="propsPath" />
      </el-drawer>

    </el-dialog>
  </div>
</template>

<script>
import { getTreeData1 } from '@/api/basics'
import MM012Oj from '@/views/basics/additional/component/MM012Oj'
import MM004Ij from '@/views/basics/additional/component/MM004Ij'
import SD003Oj from '@/views/basics/additional/component/SD003Oj'

export default {
  components: {
    MM012Oj, SD003Oj, MM004Ij
  },
  props: ['open1'],
  data() {
    return {
      currentFileComponent: '',
      propsPath: '',
      currentFile: null,
      dialogVisible: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data: [],
      selectedFileType: '', // Selected file type
      fileTypes: [
        { label: '收货（收货指令）', value: 'receipt' },
        { label: '收货（收货结果）', value: 'receipt_result' }
        // { label: '其他文件类型', value: 'other' }
        // Add more file types as needed
      ]
    }
  },
  computed: {
    visibleColumns() {
      // Define visible columns based on selectedFileType
      if (this.selectedFileType === 'receipt') {
        return [
          { prop: 'ReceiptID', label: '收货指令编号' },
          { prop: 'OrgID', label: '收货工厂的客户编号' },
          { prop: 'ShipFrom', label: '发货方的供应商ID' },
          { prop: 'ShipTo', label: '收货方的采购工厂ID' },
          { prop: 'SellerID', label: '卖方的供应商ID' },
          { prop: 'BuyerID', label: '买方的采购工厂ID' },
          { prop: 'ReceiptType', label: '收货类型' },
          { prop: 'ReceiptCode', label: '收货单号' },
          { prop: 'ReceiveDate', label: '收货日期' },
          { prop: 'RelatedTranType', label: '相关交易类型' },
          { prop: 'RefrenceNo', label: '参考编号' },
          { prop: 'Comments', label: '备注' },
          { prop: 'WareHouseID', label: '存储位置ID' },
          { prop: 'ReceiptDetailID', label: '收货指令的详细项编号' },
          { prop: 'ReceiptID1', label: '收货指令编号' },
          { prop: 'ItemID', label: '物料编号' },
          { prop: 'DeliveryDetailID', label: '交货明细ID' },
          { prop: 'OrderID', label: '订单编号' },
          { prop: 'OrderDetailID', label: '订单行项目编号' },
          { prop: 'QtyShipped', label: '发货数量' },
          { prop: 'QtyReceived', label: '收货数量' },
          { prop: 'QtyInspected', label: '检验数量' },
          { prop: 'QtyAccepted', label: '接受数量' },
          { prop: 'QtyInvalid', label: '无效数量' },
          { prop: 'ComplaintReasonCode', label: '投诉原因代码' },
          { prop: 'InvStatus', label: '库存状态' },
          { prop: 'Comments_UoM', label: '计量单位的备注' },
          { prop: 'WarehouseID', label: '存储位置ID' },
          { prop: 'BaseQty', label: '基本数量中的收货数量' },
          { prop: 'MovementType', label: '移动类型' },
          { prop: 'ValuationType', label: '估价类型' },
          { prop: 'InvoiceNumber', label: '发票号码' },
          { prop: 'VendorItemCode', label: '供应商物料代码' }
        ]
      } else if (this.selectedFileType === 'receipt_result') {
        return [
          { prop: 'ReceiptID', label: '收货指令编号' },
          { prop: 'OrgID', label: '收货工厂的客户编号' },
          { prop: 'ShipFrom', label: '发货方的供应商ID' },
          { prop: 'ShipTo', label: '收货方的采购工厂ID' },
          { prop: 'SellerID', label: '卖方的供应商ID' },
          { prop: 'BuyerID', label: '买方的采购工厂ID' },
          { prop: 'ReceiptType', label: '收货类型' },
          { prop: 'ReceiptCode', label: '收货单号' },
          { prop: 'ReceiveDate', label: '收货日期' },
          { prop: 'RelatedTranType', label: '相关交易类型' },
          { prop: 'RefrenceNo', label: '参考编号' },
          { prop: 'Comments', label: '备注' },
          { prop: 'WareHouseID', label: '存储位置ID' },
          { prop: 'ReceiptDetailID', label: '收货指令的详细项编号' },
          { prop: 'ReceiptID1', label: '收货指令编号' },
          { prop: 'ItemID', label: '物料编号' },
          { prop: 'DeliveryDetailID', label: '交货明细ID' },
          { prop: 'OrderID', label: '订单编号' },
          { prop: 'OrderDetailID', label: '订单行项目编号' },
          { prop: 'QtyShipped', label: '发货数量' },
          { prop: 'QtyReceived', label: '收货数量' },
          { prop: 'QtyInspected', label: '检验数量' },
          { prop: 'QtyAccepted', label: '接受数量' },
          { prop: 'QtyInvalid', label: '无效数量' },
          { prop: 'ComplaintReasonCode', label: '投诉原因代码' },
          { prop: 'InvStatus', label: '库存状态' },
          { prop: 'Comments_UoM', label: '计量单位的备注' },
          { prop: 'WarehouseID', label: '存储位置ID' },
          { prop: 'BaseQty', label: '基本数量中的收货数量' },
          { prop: 'MovementType', label: '移动类型' },
          { prop: 'ValuationType', label: '估价类型' }
          // { prop: 'InvoiceNumber', label: '发票号码' },
          // { prop: 'VendorItemCode', label: '供应商物料代码' }
        ]
      } else if (this.selectedFileType === 'other') {
        // Define columns for other file types
        return [
          // Define columns for other file types if needed
        ]
      }
      // Add more conditions as needed
    }
  },
  created() {
    this.fetchTreeData()
  },
  methods: {
    async fetchTreeData() {
      const response = await getTreeData1()
      this.treeData = response.data
    },
    handleNodeClick(data, node) {
      if (!data.children || data.children.length === 0) {
        console.log('Clicked file:', data.label)
        // 设置当前文件
        this.dialogVisible = false
        this.currentFileComponent = data.label
        // 打开对话框
        this.dialogVisible = true
        this.propsPath = this.getFilePath(node)
      }
    },
    getFilePath(node) {
      let path = node.data.label
      let parentNode = node.parent
      while (parentNode && parentNode.parent) {
        path = parentNode.data.label + '/' + path
        parentNode = parentNode.parent
      }
      return path
    },
    close() {
      this.$emit('update:open1', false)
      // console.log(this.list)
    },
    handleChange(file, fileList) {
      const reader = new FileReader()
      reader.onload = (event) => {
        const text = event.target.result.replace(/\n$/, '')

        if (this.selectedFileType === 'receipt') {
          this.parseText(text) // Call function to parse text data
        } else if (this.selectedFileType === 'receipt_result') {
          this.parseText1(text) // Call function to parse text data
        }
      }
      reader.readAsText(file.raw)
    },
    parseText1(text) {
      const lines = text.split('\n')
      const parsedData = lines.map((line, index) => {
        const fields = line.split('\t')
        return {
          id: index + 1, // Generate ID based on index (you can adjust as needed)
          ReceiptID: fields[0],
          OrgID: fields[1],
          ShipFrom: fields[2],
          ShipTo: fields[3],
          SellerID: fields[4],
          BuyerID: fields[5],
          ReceiptType: fields[6],
          ReceiptCode: fields[7],
          ReceiveDate: fields[8],
          RelatedTranType: fields[9],
          RefrenceNo: fields[10],
          Comments: fields[11],
          WareHouseID: fields[12],
          ReceiptDetailID: fields[13],
          ReceiptID1: fields[14],
          ItemID: fields[15],
          DeliveryDetailID: fields[16],
          OrderID: fields[17],
          OrderDetailID: fields[18],
          QtyShipped: fields[19],
          QtyReceived: fields[20],
          QtyInspected: fields[21],
          QtyAccepted: fields[22],
          QtyInvalid: fields[23],
          ComplaintReasonCode: fields[24],
          InvStatus: fields[25],
          Comments_UoM: fields[26],
          WarehouseID: fields[27],
          BaseQty: fields[28],
          MovementType: fields[29],
          ValuationType: fields[30]
          // InvoiceNumber: fields[31],
          // VendorItemCode: fields[32]
        }
      })
      this.data = parsedData
    },
    parseText(text) {
      const lines = text.split('\n')
      const parsedData = lines.map((line, index) => {
        const fields = line.split('\t')
        return {
          id: index + 1, // Generate ID based on index (you can adjust as needed)
          ReceiptID: fields[0],
          OrgID: fields[1],
          ShipFrom: fields[2],
          ShipTo: fields[3],
          SellerID: fields[4],
          BuyerID: fields[5],
          ReceiptType: fields[6],
          ReceiptCode: fields[7],
          ReceiveDate: fields[8],
          RelatedTranType: fields[9],
          RefrenceNo: fields[10],
          Comments: fields[11],
          WareHouseID: fields[12],
          ReceiptDetailID: fields[13],
          ReceiptID1: fields[14],
          ItemID: fields[15],
          DeliveryDetailID: fields[16],
          OrderID: fields[17],
          OrderDetailID: fields[18],
          QtyShipped: fields[19],
          QtyReceived: fields[20],
          QtyInspected: fields[21],
          QtyAccepted: fields[22],
          QtyInvalid: fields[23],
          ComplaintReasonCode: fields[24],
          InvStatus: fields[25],
          Comments_UoM: fields[26],
          WarehouseID: fields[27],
          BaseQty: fields[28],
          MovementType: fields[29],
          ValuationType: fields[30],
          InvoiceNumber: fields[31],
          VendorItemCode: fields[32]
        }
      })
      this.data = parsedData
    }
  }
}
</script>

<style scoped>
.upload-demo {
  margin-bottom: 20px;
}
/deep/ .el-dialog__body{
  padding-top: 0;
}
</style>
